<template>
	<view class="content">
		
		<view class="image">
			<image  :src="CoverImage"></image>
			<text class="cuIcon-attention text-white" >{{options.click}}</text>
		</view>
		<view class="bulding-info">
			<view class="title text-cut text-bold">{{options.housename}}</view>
			<view class="company text-gray text-cut  flex">{{options.companyname}}</view>
			<text class="addr text-gray text-cut  flex">{{options.houseaddress}}</text>
			<view class="price text-left text-bold"><text v-if="options.fxmoney!=null&&options.fxmoney!=''&&options.fxmoney!='0.00'">佣金:{{options.fxmoney}}</text></view>
			
			<view class="other">
				<view class="text-green  text-cut">
					<text>{{options.areaname}}</text>
					<text v-if="options.housetype!=null">{{options.housetype}}</text>
				</view>
				<view class="text-right text-red text-bold"><text>{{options.houseprice}}元/㎡</text></view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data(){
			return{
				imgRoot:this.$rootUrl,
			}
			
		},
		computed: {
		    // 计算属性的 getter
		    CoverImage: function () {
		      // `this` 指向 vm 实例
		      return this.options.thumb.indexOf('Attachment')!=-1?(this.imgRoot+this.options.thumb):this.options.thumb
		    }
		},
		props: {
			options: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		methods: {
			click() {
				this.$emit('click');
			},
			close(e) {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: row;
		border-bottom: #E1D7F0 1px solid;
		background: #FFFFFF;
		padding:1vw;
		position:relative;
		.image{
			width:35vw;
			image{
				width:35vw;
				height: 28vw;
			}
			text{
				position: absolute;
				left:1vw;
				font-size:22upx;
				padding-left:10px;
				bottom:8px;width:31.5vw;
				background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
			}
		}
		.bulding-info{
			margin-left: 2vw;
			width:61vw;
			display: flex;
			flex-direction: column;
			font-size:24upx;
			view{
				flex:1;
			}
			.price{
				color:#ED1C24
			}
			.other{
				display:flex;
				flex-direction: row;
				.text-green{
					flex:1;
					text{
						padding: 2px;
						margin-left:4px;
						background:#DDDDDD;
						
					}
				}
				.text-right{
					font-size: 12px;
				    .icon{
						font-size:13px;
					}
				}
			}
		}
	}
</style>
